<template>
    <view class="like-toast" :style="styleo" v-if="showLikeToast">
    <!-- <view class="like-toast" :style="styleo"> -->
        {{ content }}
    </view>

</template>

<script>
    export default {
        props: {
            // src: {
            //     type: String,
            //     default: '/static/logo.png'
            // },
			// styleObj:{
			// 	type:Object,
			// 	default:()=>{}
			// }
        },
        data() {
            return {
                showLikeToast: false,
                content: '111111111111111',
				styleo:{}
            }
        },
		mounted() {
			// this.styleo = this.styleObj
			
		},
        watch: {
		// 	styleObj(newVal,oldVal){
		// 		this.styleo = newVal
		// 		console.log('styleo',this.styleo)
		// 	}
		},
        methods: {
            open({
                content = '',
                duration = 5000,
				styleo = {}
            } = {}) {
                this.content = content
                this.styleo = styleo
                // console.log('styleo',this.styleo)
                this.showLikeToast = true
                if(this.timeId) clearTimeout(this.timeId)
                this.timeId = setTimeout(() => {
                    this.content = ""
                    this.showLikeToast = false
                }, duration)
            }
        }
    }
</script>

<style lang="scss">
    .like-toast{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
        width: max-content;
        max-width: 710rpx;
        white-space: pre-wrap;
        color: #f1f16d;
        font-size: 45rpx;
        font-weight: bold;
        padding: 30rpx;
        background-color: rgba(0,0,0,0.3);
        border-radius: 20rpx;
        transform-origin: 0 0;
        animation: zoomIn 0.2s ease-in-out forwards;
    }
    
    @keyframes zoomIn {
      0% {
        opacity: 0; 
        transform: scale(0.7)  translate(-50%, -50%);
      }
      100% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%);
      }
    }
</style>